<template>
  <view class="content">
    <z-paging ref="paging" v-model="data.dataList" @query="queryList">
      <view class="p-32">
        <view v-for="(item,index) in data.dataList" :key="index">
          <view class="seal-list-item no-border flex"
                @click="goNav(`${pageUrl.sealDetailUrl[2]}?id=${item.member_seal_id}`)">
            <view class="image-box">
              <image :src="item.member_seal_images_url"></image>
            </view>
            <view>
              <view class="title">印章名称（{{ item.member_seal_title }}）</view>
              <view class="time">创建时间 {{ item.member_seal_updated_at }}</view>
              <view class="time">使⽤次数 {{ item.member_seal_count }}</view>
            </view>

          </view>
          <u-line color="#F6F6F6"></u-line>
        </view>
      </view>
    </z-paging>

    <view v-if="checkPermissions('contract-v1::member-seal.store')"
          @click="goNav(`${pageUrl.sealUploadUrl[2]}`)" class="addseal">
      上传<br/>印章
    </view>

  </view>
</template>

<script setup>
import {sealList} from "../../../../api/module/mine.js";
import {reactive, ref} from "vue"
import {checkPermissions, goNav, pageUrl} from "../../../../utils/common";

const paging = ref(null)
const data = reactive({
  dataList: []
})
const queryList = (pageNo, pageSize) => {
  let params = {
    page: pageNo,
    limit: pageSize,
  }
  sealList(params).then(res => {
    paging.value.complete(res.data)
  })
}
</script>

<style lang="scss" scoped>
.image-box {
  width: 96rpx;
  height: 95rpx;
  border-radius: 8rpx;
  border: 1rpx solid #CCCCCC;
  margin-right: 24rpx;

  image {
    width: 100%;
    height: 100%;
  }
}

.seal-list-item {
  padding: 32rpx 10rpx;
  box-sizing: border-box;
  border-bottom: 2rpx solid #F6F6F6;

  .title {
    font-size: 28rpx;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.9);
    line-height: 40rpx;
  }

  .time {
    font-size: 28rpx;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.6);
    line-height: 28rpx;
    margin-top: 16rpx;
  }
}

.addseal {
  width: 100rpx;
  height: 100rpx;
  background: #F0F2F4;
  box-shadow: -10rpx -10rpx 8rpx 0rpx rgba(255, 255, 255, 0.5), 10rpx 10rpx 8rpx 0rpx rgba(230, 234, 238, 0.4), inset 10rpx 10rpx 16rpx 0rpx rgba(244, 249, 254, 0.1), inset -10rpx -10rpx 16rpx 0rpx #FFFFFF;
  border-radius: 50rpx;
  border: 2rpx solid;
  border-image: linear-gradient(136deg, rgba(255, 255, 255, 0.8), rgba(251, 251, 252, 1)) 2 2;
  font-size: 24rpx;
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  color: #4787F0;
  line-height: 32rpx;
  position: fixed;
  right: 0;
  top: 712rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 30rpx;
  box-sizing: border-box;
}
</style>